import React, { Component } from 'react';
import { Route } from 'react-router-dom';

import Detail from './Detail';

const messages = [
  { id: '001', title: 'message001' },
  { id: '002', title: 'message002' },
  { id: '003', title: 'message003' },
];

export default class Message extends Component {
  push = (path, state) => {
    this.props.history.push(path, state);
  }

  replace = (path, state) => {
    this.props.history.replace(path, state);
  }

  render() {
    return (
      <>
        <ul>
          {messages.map(it => (
            <li key={it.id}>
              <a
                href="javascript:void(0)"
                // onClick={() => { this.replace(`/home/message/detail/${it.id}?title=${it.title}`) }}
                onClick={() => { this.push(`/home/message/detail/${it.id}?title=${it.title}`, it) }}
              >
                {it.title}
              </a>
            </li>
          ))}
        </ul>
        <hr />
        <Route path="/home/message/detail/:id" component={Detail} />
      </>
    )
  }
}
